<template>
  <div :id="chartsData.id" :style="{ width: '100%', height: '180px', backgroundColor: '#fff' }"></div>
</template>
<script>
import echarts from 'echarts'
var namer = ['近30天工单完成', '近30天工单故障']
var colors = [
  ['#4ECB73', 'rgba(78,203,115,0.3)'],
  ['#F56C6C', 'rgba(245,108,108,0.3)']
]
let echartData = {}
export default {
  data() {
    return {}
  },
  props: ['chartsData'],
  watch: {
    chartsData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      }
    }
  },
  mounted() {
    echartData = this.chartsData
    var myChart = echarts.init(document.getElementById(echartData.id))
    const option = {
      title: {
        text: namer[echartData.index],
        subtext: echartData.count,
        subtextStyle: {
          fontSize: 28,
          color: '#717171'
        },
        right: '-8%',
        top: '40%',
        textAlign: 'center',
        textStyle: {
          fontWeight: 'normal',
          fontSize: '14',
          color: colors[echartData.index][0],
          textAlign: 'center'
        }
      },
      series: [
        {
          name: namer[echartData.index],
          type: 'pie',
          clockWise: false,
          radius: [65, 80],
          left: '-40%',
          itemStyle: {
            normal: {
              color: colors[echartData.index][0],
              shadowColor: colors[echartData.index][0],
              shadowBlur: 0,
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          center: '50%',
          data: [
            {
              value: echartData.count,
              label: {
                normal: {
                  formatter: function(params) {
                    if (params.value) {
                      const allNum = params.value / echartData.gzwanchanAll
                      return Math.round(allNum * 100) + '{a|%}'
                    } else {
                      return 0 + '{a|%}'
                    }
                  },
                  position: 'center',
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold',
                    color: colors[echartData.index][0]
                  },
                  rich: {
                    a: {
                      // color: '#7F7F7F',
                      fontSize: 14
                    }
                  }
                }
              }
            },
            {
              value: 100 - echartData.count,
              name: 'invisible',
              itemStyle: {
                normal: {
                  color: colors[echartData.index][1]
                },
                emphasis: {
                  color: colors[echartData.index][1]
                }
              }
            }
          ]
        }
      ]
    }

    myChart.setOption(option)
    window.addEventListener('resize', function() {
      //   让我们图表调用resize方法
      myChart.resize()
    })
    myChart.on('click', params => {
      if (params.componentType === 'series') {
      }
      // alert(params.seriesName + '---' + params.name + '---' + params.value)
    })
  }
}
</script>
